<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import {useUserStore} from "@/stores/user.js";
import { ElMessageBox } from 'element-plus'
import router from '@/router/index'
import {imageRecognitionAPI} from '@/apis/AI'


const boxes = ref([])
const hoveredIndex = ref(null); // 当前悬浮的盒子的索引

onMounted(()=>{
  boxes.value=useUserStore().favorites
})

const hoverBox = ref(null);

const showIcon = (index) => {
  hoveredIndex.value = index;
};

const hideIcon = () => {
  hoveredIndex.value = null
};

const handleClose = (index) => {
  ElMessageBox.confirm('确认删除吗')
      .then(() => {
       boxes.value.splice(index,1)
        useUserStore().favorites.splice(index,1)
      })
      .catch(() => {
        // catch error
      })
}
function toGoodsDetail(gid) {
  router.push(`/detail/${gid}`)
}

async function searchGoodsByImage(imgUrl) {
  router.push('/category/正在寻找相似商品')
  const res=await imageRecognitionAPI(imgUrl)
  let category=res.choices[0].message.content.length>10?'没有这种商品':res.choices[0].message.content
  await router.push({
    path: `/category/${category}`,
    query: {
      date: new Date().getTime()
    }
  })
  location.reload();//刷新页面
}

</script>

<template>
<div class="panel">
  <h3>宝贝收藏</h3>

  <div class="cardList">
    <div class="item" v-for="(item,index) in boxes" :key="index">
    <div class="item-Image" @mouseover="showIcon(index)" @mouseleave="hideIcon" ref="hoverBox">
      <img :src="item.goodsImg[0]" alt="" style="width: 100%;height: 100%;border-radius: 8px">
      <div class="hover-icon" @click="handleClose(index)"  v-show="index===hoveredIndex"></div>
      <div class="hover-footer" v-show="index===hoveredIndex">
        <span @click="router.push(`/shop/${item.shopId}`)">进入店铺</span>
        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        <span @click="searchGoodsByImage(item.goodsImgStr)" >按图找相似</span>
      </div>
    </div>
    <div class="item-title" @click="toGoodsDetail(item.gid)">{{item.title}}</div>
      <span class="item-price">¥
        <span style="font-size: 24px">{{item.price}}</span></span>
    </div>
  </div>

  <el-empty v-if="boxes.length===0" description="暂无收藏"></el-empty>
</div>
</template>

<style scoped lang="less">
.panel{
  width: 990px;
  min-height: 600px;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 10px 20px;
}
.cardList{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 750px;
  overflow: auto;
}
.item{
  width: 230px;
  height: 280px;
  display: flex;
  flex-direction: column;
}
.item-Image{
  width: 230px;
  height: 200px;
  border-radius: 8px;
  background-color: #c7def6;
  position: relative; /* 伪元素能够相对于这个盒子定位 */
}
.item-title{
  padding: 0 5px;
  width: 100%;
  height: 45px;
  color: #11192d;
  font-size: 16px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制行数 */
  overflow: hidden;

}
.item-title:hover{
  color: #00a4fd;
  cursor: pointer;
}
.item-price{
  font-size: 14px;
  color: #ff5000;
}
.hover-icon {
  width: 40px;
  height: 40px;
  background-image: url('@/assets/deleteIcon.png');
  background-size: contain;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer; /* 添加鼠标指针样式以表明它是可点击的 */
  opacity: 0.8; /* 可选：设置透明度以更好地融入背景 */
  /* 隐藏原始边框和背景等，确保它只显示背景图片 */
  border: none;
  outline: none;
  box-shadow: none;
  background-color: rgba(221, 221, 221, 0.68);
}
.hover-footer{
  position: absolute;
  width: 100%;
  height: 45px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  line-height: 45px;
  background-color: rgba(221, 221, 221, 0.68);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  bottom:0
}
</style>